<template>
  <div class="screen-title" :class="{'screen-title-small': isSmall}">
    <p class="title">{{ title }}</p>
  </div>
</template>

<script>
export default {
  props: {
    isSmall: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '标题',
    }
  },
  data() {
    return {}
  },
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
  .screen-title {
    width: 568px;
    height: 50px;
    background-image: url('../../../assets/images/fjscreen/title-bg.png');
    background-size: 100% 80%;
    background-repeat: no-repeat;
    background-position: 0 10px;
    &.screen-title-small {
      width: 100%;
      height: 40px;
      background-size: 100% 64%;
      background-position: 0 14px;
    }
    .title {
      font-family: PingFang SC;
      font-weight: 800;
      font-size: 24px;
      color: $white;
      line-height: 20px;
    }
  }
</style>